<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="increment">点我sum+1</button>
    <button @click="decrement">点我sum-1</button>
    <hr>
    <img v-for="(img, index) in dogList" :key="index" :src="img">
    <button @click="getDog">再来一只狗</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import useSum from '../hooks/useSum'
  import useDog from '../hooks/useDog'

  let { sum, increment, decrement } = useSum()
  let { dogList, getDog } = useDog()



</script>
<style scoped>
  .person {
    width: 100%;
    background-color: skyblue;
    box-shadow: 0px 1px 2px #ddd;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }

  img{
    height: 100px;
  }
</style>
